<template>
  <div class="page">
    <h1>调色板</h1>
    {{color|json}}
    <div class="tiaose-box" :style="{backgroundColor:'rgb('+color.r+','+color.g+','+color.b+')'}"></div>
    <tiao-se :color='color' colorname="r"></tiao-se>
    <tiao-se :color='color' colorname="g"></tiao-se>
    <tiao-se :color='color' colorname="b"></tiao-se>
  </div>
</template>

<script>
import tiaoSe from "./tiaoseban-sub";
export default {
  data() {
    return {
      color: {
        r: 123,
        g: 222,
        b: 100
      }
    };
  },
  components: {
    tiaoSe
  }
};
</script>

<style lang="stylus" scoped>
.tiaose-box {
  width: 200px;
  height: 200px;
}
</style>

